<template >
	<el-row class="container">
		<el-col :span="24" class="header">
			<el-col :span="24" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
        <!-- {{collapsed?'':sysName}} -->
        {{htmlName}}
        <div class="userinfo" style="padding-right: 93px;"  @click="save()">
                <router-link v-if="menubt.indexOf('/topo')>-1" class="routerLink" tag="button" :to="url"  style="color: #fff">{{name}}</router-link>
            <!-- <span >当前时间 : {{timeget}}</span> -->
            <span style="padding-left: 20px;">{{timeget}}</span>
          </div>
          
              <div  class="name" >
                <router-link class="routerLink"  tag="button" to="/home_page"  style="color: #fff">设备管理</router-link>
                <router-link v-if="menubt.indexOf('/hdpi')>-1" class="routerLink" :class="[isactive==1? 'title-active':'']" tag="button" to="/hdpi"  style="color: #fff">监控大屏</router-link>
                <router-link v-if="menubt.indexOf('/charging')>-1" class="routerLink" :class="[isactive==2? 'title-active':'']" tag="button" to="/charging"  style="color: #fff">充电监控</router-link>
                <router-link v-if="menubt.indexOf('/checkCamera')>-1" class="routerLink" :class="[isactive==3? 'title-active':'']" tag="button" to="/checkCamera"  style="color: #fff">摄像头</router-link>
                <router-link v-if="menubt.indexOf('/temperature')>-1" class="routerLink" :class="[isactive==4? 'title-active':'']" tag="button" to="/temperature"  style="color: #fff">温度监控</router-link>
                <router-link v-if="menubt.indexOf('/track')>-1"  class="routerLink" :class="[isactive==5? 'title-active':'']" tag="button" to="/track"  style="color: #fff">智慧环卫大屏</router-link>
          </div>
			</el-col>
		
			
		</el-col>
		<el-col :span="24" class="main">
			<section class="content-container" style="padding: 0 !important;">
				<div class="grid-content bg-purple-light">
					<el-col :span="24" class="content-wrapper">
						<!-- <transition    name="fade" mode="out-in"> -->
							<router-view ref="transEvent"></router-view>
						<!-- </transition> -->
					</el-col>
				</div>
			</section>
		</el-col>
	</el-row>
</template>

<script>
  import {
		logout,company_get_my,dict_query
	} from "../../api/api";
export default {
  data() {
    return {
      url:'',
      name:'',
      htmlName:'',
      sysName: "",
      collapsed: false,
      sysUserName: "",
      sysUserAvatar: "",
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      timeget:'',
      t:'',
      comName:'',
      editFormVisible:false,
      addLoading:false,
      cityName:'',//当前所在城市
      isactive: "",//切换标签高亮
    };
  },
  watch:{
      $route(to,from){
          this.$router.go(0)
      }
  },
  methods: { 
    save(){
      if(this.$route.path=='/charging'&&this.name=='充电桩监控大屏'){
      this.name='监控大屏'
        this.url='/hdpi'  
        this.htmlName = '充电桩监控大屏'
      }else{
      this.name='充电桩监控大屏'
        this.url='/charging'
        this.htmlName = '监控大屏'
      }
    },
    nameEdit(){

    },
    handleSave() {
          
    this.$refs.transEvent.handleSave();
        },
        handleSave1(){

this.$refs.transEvent.handleSave1();
},
        handleSave2(){

          this.$refs.transEvent.handleSave2();
        },
    onSubmit() {
    },
    handleopen() {
      //console.log('handleopen');
    },
    handleclose() {
      //console.log('handleclose');
    },
    handleselect: function(a, b) {},
    //退出登录
    logout: function() {
				var _this = this;
				this.$confirm('确认退出吗?', '提示', {
					//type: 'warning'
				}).then(() => {

					var loginParams = {
						token: localStorage.getItem('key')
          };
					logout(loginParams).then(e => {
						this.logining = false;
						//NProgress.done();
						let {
							code,
							data,
							message
						} = e;
            sessionStorage.clear();

localStorage.removeItem('key');
localStorage.removeItem('menu');
localStorage.removeItem('menubt');
localStorage.removeItem('maplist')
_this.$router.push('/login');

						if (code !== 0) {
							this.$message({
								message: message,
								type: "error"
							});
						} else {

					

						}
					});
				}).catch(() => {

				});
    },
    //折叠导航栏
    collapse: function() {
      this.collapsed = !this.collapsed;
    },
    showMenu(i, status) {
      this.$refs.menuCollapsed.getElementsByClassName(
        "submenu-hook-" + i
      )[0].style.display = status ? "block" : "none";
    },
    map(){ 
        let self = this
        //获取地址
        var map = new BMap.Map(this.$refs.allmap);
        /* 百度api 通过浏览器定位 */
        var geolocation1 = new BMap.Geolocation();
        geolocation1.getCurrentPosition(function(r) {
          if (this.getStatus() == BMAP_STATUS_SUCCESS) {     
            var mk = new BMap.Marker(r.point);   
                  
            var new_point = new BMap.Point(r.point.lng,r.point.lat);
            var geoc = new BMap.Geocoder();  //初始化，Geocoder类
            let addComp,address;
            geoc.getLocation(new_point, function (rs) {
              addComp = rs.addressComponents;
                          
              address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
              self.cityName = address
            })
          
          } else {
            alert('获取定位失败');
          }
        });
    
      }
  },
  mounted() {
			this.menubt = localStorage.getItem('menubt')
     if(this.$route.path=='/charging'){
      this.name='监控大屏'
      this.url='/hdpi'
       this.htmlName = '充电桩监控大屏'
       this.isactive = 2
      }else{
      this.name='充电桩监控大屏'
        this.url='/charging'
       this.htmlName = '监控大屏'
       this.isactive = 1
      }
      if(this.$route.path == '/checkCamera'){
        this.htmlName = '摄像头监控'
       this.isactive = 3
      }
      if(this.$route.path == '/temperature'){
        this.htmlName = '温度监控'
       this.isactive = 4
      }
      if(this.$route.path == '/track'){
        this.htmlName = '智慧环卫大屏'
       this.isactive = 5
      }
    // company_get_my().then(e => { 
		// 		let {
		// 			code,
		// 			data,
		// 			message
		// 		} = e;
		// 		console.log(code, data, message);

		// 		if (code !== 0) {

		// 		} else {
		// 			// alert(JSON.stringify(JSON.stringify(data)))
		// 			if(data){

		// 		this.sysName = e.data.title
		// 			}

		// 		}
		// 	})
//     var myCity = new BMap.LocalCity(); 
// myCity.get(getCityByIP); 
// let _this=this;
// function getCityByIP(rs) { 
//   console.log(rs);
//   _this.cityName = rs.name; 
// } 
  let para = {
          pageNo: 1,
          pageSize: 10,
          name:'sys-conf'
      };
      dict_query(para).then((res) => { 
            this.begCode (res.code);
            this.sysName = res.data.list[0].remark;
        });
  this.map()
    this.t=setInterval(()=>{
      var date = new Date();

　　var  d1= date.toLocaleString('chinese',{hour12:false});
      this.timeget=d1;
    },1000)
    var user = sessionStorage.getItem("user");
    if (user) {
      user = JSON.parse(user);
      this.sysUserName = user.userName || "";
      this.sysUserAvatar = user.avatar || "";
    }
  }
};
</script>

<style scoped lang="scss">
@import "~scss_vars";
.container .header {
  background: #1a3257 !important;
	box-shadow: 0px 2px 7px 0px 
		rgba(0, 0, 0, 0.13) ;
}
.container {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
  .header {
    height: 60px;
    line-height: 60px;
    background: $color-primary;
    color: #fff;
    .userinfo {
      text-align: right;
    padding-right: 35px;
    position: absolute;
    right: 0;
    top: 0;
    font-size: 12px;
      .userinfo-inner {
        cursor: pointer;
        color: #fff;
        img {
          width: 40px;
          height: 40px;
          border-radius: 20px;
          margin: 10px 0px 10px 10px;
          float: right;
        }
      }
    }
    .name{
          text-align: left;
          // padding-left: 105px;
          padding-left: 70px;
          position: absolute;
          left: 0;
          top: 0;
          font-size: 12px;
    }
    .logo {
      //width:230px;
      height: 60px;
      font-size: 22px;
      padding-left: 20px;
      padding-right: 20px;
      border-color: rgba(238, 241, 146, 0.3);
      border-right-width: 1px;
      border-right-style: solid;
      img {
        width: 40px;
        float: left;
        margin: 10px 10px 10px 18px;
      }
      .txt {
        color: #fff;
      }
    }
    .logo-width {
      width: 300px;
    }
    .logo-collapse-width {
      width: 60px;
    }
    .tools {
      padding: 0px 23px;
      width: 14px;
      height: 60px;
      line-height: 60px;
      cursor: pointer;
    }
  }
  .main {
    display: flex;
    // background: #324057;
    position: absolute;
    top: 60px;
    bottom: 0px;
    overflow: hidden;
    aside {
      flex: 0 0 230px;
      width: 230px;
      // position: absolute;
      // top: 0px;
      // bottom: 0px;
      .el-menu {
        width: auto !important;
        height: 100%;
      }
      .collapsed {
        width: 60px;
        .item {
          position: relative;
        }
        .submenu {
          position: absolute;
          top: 0px;
          left: 60px;
          z-index: 99999;
          height: auto;
          display: none;
        }
      }
    }
    .menu-collapsed {
      flex: 0 0 60px;
      width: 60px;
    }
    .menu-expanded {
      flex: 0 0 230px;
      width: 230px;
    }
    .content-container {
      // background: #f1f2f7;
      flex: 1;
      // position: absolute;
      // right: 0px;
      // top: 0px;
      // bottom: 0px;
      // left: 230px;
      overflow-y: scroll;
      padding: 20px;
      .breadcrumb-container {
        //margin-bottom: 15px;
        .title {
          width: 200px;
          float: left;
          color: #475669;
        }
        .breadcrumb-inner {
          float: right;
        }
      }
      .content-wrapper {
        // background-color: #fff;
        box-sizing: border-box;
      }
    }
  }
}
section{
  
  background:url(../../assets/00.jpg);
  
  background-size:100% 100%;
  background-position: top, bottom;
  background-repeat: no-repeat;
}
.container .main .content-container .content-wrapper {
    // background-color: #1a3257;
    height: 100%;
    box-sizing: border-box;
}
.container .header .logo{
  border: 0;
}

  .container .main .content-container::-webkit-scrollbar {display:none}
  .container .header .logo-width{
    width: 100%;
    text-align: center;
    background: url(../../assets/1556508074.png) center;
    background-size: 60% 98%;
    background-position: top;
    
  background-repeat: no-repeat;
  }
  .routerLink{
    background-color: rgb(45, 71, 110);
    cursor: pointer;
    padding: 5px 10px;
    border: 1px solid #48dcfc;
    border-radius: 5px;
    font-size: 16px;
  }
  .grid-content bg-purple-light{
    height: 100%;
  }
  .title-active{
    background: #5a92e7;
  }
  .userinfo{

  }
</style>